
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Nodejs 环境搭建之vscode - 乐の博客</title>
	<meta name="author" content="zhidong">

	
	<meta name="description" content="Nodejs 环境搭建之vscode 开始学习Nodejs了，在这里记录一些轨迹吧。 工欲善其事，必先利其器。在开始之前，先搭好顺手的工具。
Nodejs的安装网上有很多教程了，这里着重介绍开发工具vscode的安装和配置。
vscode是挺不错的nodejs编辑工具，支持代码提示、 &hellip;">
	<meta name="keywords" content="nodejs,vscode,IntelliSense">

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="/atom.xml" rel="alternate" title="乐の博客" type="application/atom+xml">
	
	<link rel="canonical" href="https://zhidong.rochu.cn/blog/2016/03/15/nodejs-startup-tools/">
	<link href="/favicon.png" rel="shortcut icon">
	<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="/javascripts/libs/jquery.min.js"></script>
	<!-- <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'> -->
	
</head>


<body>
	<div class="container">
		<div class="left-col">
			<div class="intrude-less">
			<header id="header" class="inner"><div class="profilepic">	
	<script src="/javascripts/md5.js"></script>
	<script type="text/javascript">
		document.write("<img src='/images/pingtouge.png' alt='Profile Picture' style='width: 160px;' />");
	</script>
</div>
<h1><a href="/">乐の博客</a></h1>
<p class="subtitle">行而不思则罔，思而不行则怠</p>
<nav id="main-nav"><ul>
	<li><a href="/">Blog</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/portfolio">Portfolio</a></li>
	<li><a href="/archives">Archive</a></li>
</ul>
</nav>
<nav id="sub-nav">
	<div class="social">
		
		<a class="weibo" href="http://www.weibo.com/agdsdl" title="Weibo">Weibo</a>
		
		
		
		
		
		<a class="github" href="https://github.com/agdsdl" title="GitHub">GitHub</a>
		
		
		
		
		
		
		
		<a class="rss" href="/atom.xml" title="RSS">RSS</a>
		
	</div>
</nav>
<p class="description">知冬的后花园</p>
</header>				
			</div>
		</div>	
		<div class="mid-col">
			
				
			
			<div class="mid-col-container">
				<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="title" itemprop="name">Nodejs 环境搭建之vscode</h1>
	<div class="entry-content" itemprop="articleBody"><p>开始学习Nodejs了，在这里记录一些轨迹吧。</p>

<p>工欲善其事，必先利其器。在开始之前，先搭好顺手的工具。
Nodejs的安装网上有很多教程了，这里着重介绍开发工具vscode的安装和配置。
vscode是挺不错的nodejs编辑工具，支持代码提示、自动完成和debug，并且它本身也是nodejs编写的。
当然如果你发现有更好用的工具，也请告诉我。</p>

<h2>nodejs安装</h2>

<p>安装Nodejs，我是从这里看的：<a href="http://nqdeng.github.io/7-days-nodejs/">七天学会nodejs</a>, 还有<a href="https://nodejs.org/">官网</a>.</p>

<h2>下载和安装</h2>

<p>下载地址：<a href="http://code.visualstudio.com/">http://code.visualstudio.com/</a></p>

<h2>配置命令行</h2>

<p>配置命令行，使其可以用命令行这样启动：（仅限MacOS）</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>vscode .
</span></code></pre></td></tr></table></div></figure>


<h3>MacOS系统：</h3>

<p>在.bash_profile文件中加入下面代码：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="k">function</span> vscode <span class="o">()</span> <span class="o">{</span> <span class="nv">VSCODE_CWD</span><span class="o">=</span><span class="s2">&quot;$PWD&quot;</span> open -n -b <span class="s2">&quot;com.microsoft.VSCode&quot;</span> --args <span class="nv">$*</span><span class="p">;</span> <span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>上面代码中的<code>com.microsoft.VSCode</code>是应用的<code>bundle identifier</code>。查看方法：
1. 在应用上点击右键，选择“显示包内容”。
2. 打开<code>Contents</code>目录中的<code>info.plist</code>
3. 其中<code>CFBundleIdentifier</code>键下面的值就是应用的<code>bundle identifier</code>。
其实这种方式适用于大多数Mac应用，比如你可以参考我的<a href="https://github.com/agdsdl/dotfiles/blob/master/source/52_editors.sh">文件</a></p>

<h3>其他系统：</h3>

<p>请参考<a href="https://code.visualstudio.com/docs/editor/setup">https://code.visualstudio.com/docs/editor/setup</a></p>

<h2>配置代码提示和自动完成</h2>

<h3>（2016.4.5勘误）</h3>

<p>发现有时候vscode不能正确的进行代码提示，到vscode官网一看，代码提示的安装方法更新了，以下是最新内容：</p>

<h3>添加jsconfig.json</h3>

<p>在工程目录下新建一个文件<code>jsconfig.json</code>，填入以下内容：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="o">{</span>
</span><span class='line'>    <span class="s2">&quot;compilerOptions&quot;</span>: <span class="o">{</span>
</span><span class='line'>        <span class="s2">&quot;target&quot;</span>: <span class="s2">&quot;es5&quot;</span>,
</span><span class='line'>        <span class="s2">&quot;module&quot;</span>: <span class="s2">&quot;commonjs&quot;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>这告诉vscode你正在使用ES5的javascript标准写代码，下面一行表示支持使用commonjs导出的模块（来进行代码提示）。</p>

<h3>添加TypeScript定义文件</h3>

<p>vscode使用TypeScript定义文件（比如<code>node.d.ts</code>）来提供代码提示和自动完成功能。
vscode推荐使用typings安装和管理TypeScript文件。
首先使用下面代码安装typings：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>npm install -g typings
</span></code></pre></td></tr></table></div></figure>


<p>这将在全局安装typings。</p>

<p>然后，在你的工程目录下，安装你需要的TypeScript文件：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>typings install node --ambient
</span><span class='line'>typings install express serve-static express-serve-static-core --ambient
</span></code></pre></td></tr></table></div></figure>


<p>安装完之后，应该就可以看到代码提示了。</p>

<h3>验证代码提示功能</h3>

<p>有一个简单的方法验证vscode代码提示功能是否正常了：
新起一行输入</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>__dirname
</span></code></pre></td></tr></table></div></figure>


<p>鼠标移到<code>__dirname</code>上，如果提示类型是<code>Any</code>，说明代码提示功能还不正常。
如果能提示类型是<code>string</code>，那么说明代码提示工作正常了。</p>

<p>注：<code>__dirname</code>是nodejs内置全局变量。</p>

<!-- more -->


<h2>调试</h2>

<h3>Launch</h3>

<p>点击<img src="https://code.visualstudio.com/images/nodejs_debugicon.png" alt="按钮" />切换到调试视图。
在调试视图的顶部，点击小齿轮，选择Launch，这会创建一个launch.json配置文件。你可能要改的是<code>program</code>字段，其他默认即可。
在代码行的左侧点击来下断点，然后点击启动或者F5即可启动调试：
<img src="https://code.visualstudio.com/images/nodejs_debugsession.png" alt="调试图" /></p>

<h3>Attach</h3>

<p>如果要Attach到现有node程序，那么你需要这样启动node：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>node --debug program.js <span class="c">#debug模式启动</span>
</span><span class='line'>node --debug-brk program.js <span class="c">#debug模式启动并停在第一行</span>
</span></code></pre></td></tr></table></div></figure>


<p>然后将<code>launch.json</code>配置文件改成这样的：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="o">{</span>
</span><span class='line'>    <span class="s2">&quot;version&quot;</span>: <span class="s2">&quot;0.2.0&quot;</span>,
</span><span class='line'>    <span class="s2">&quot;configurations&quot;</span>: <span class="o">[</span>
</span><span class='line'>        <span class="o">{</span>
</span><span class='line'>            <span class="s2">&quot;name&quot;</span>: <span class="s2">&quot;Attach to Node&quot;</span>,
</span><span class='line'>            <span class="s2">&quot;type&quot;</span>: <span class="s2">&quot;node&quot;</span>,
</span><span class='line'>            <span class="s2">&quot;request&quot;</span>: <span class="s2">&quot;attach&quot;</span>,
</span><span class='line'>            <span class="s2">&quot;port&quot;</span>: 5858
</span><span class='line'>        <span class="o">}</span>
</span><span class='line'>    <span class="o">]</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>以上。</p>

<p>参考：
<a href="https://code.visualstudio.com/docs/runtimes/nodejs">https://code.visualstudio.com/docs/runtimes/nodejs</a></p>
</div>

</article>
<!-- 
	<div class="share">
	<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
	
	
	
	
	
	<a class="addthis_button_compact"></a>
	<a class="addthis_counter addthis_bubble_style"></a>
	</div>
  <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid="></script>
</div>

 -->


<section id="comment">
    <h1 class="title">Comments</h1>
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script>
    const gitalk = new Gitalk({
    clientID: '29bbf743e30b99394771',
    clientSecret: '41e4b7f1aa79742fc459f2971ad51596df5e4dda',
    repo: 'agdsdl.github.io',
    owner: 'agdsdl',
    admin: ['agdsdl'],
    id: location.pathname,      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
    })

    gitalk.render('gitalk-container')
    </script>
</section></div>
			</div>
			<footer id="footer" class="inner">Copyright &copy; 2019

    zhidong

<br>
Powered by Octopress.

Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a></footer>
			<script src="/javascripts/slash.js"></script>
<!-- <script src="/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
	$('.fancybox').fancybox();
})(jQuery);
</script> Delete or comment this line to disable Fancybox -->




	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-65560025-1']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>



		</div>
	</div>
</body>
</html>
